<template>
  <div class="backwrapper">
      <el-page-header @back="goBack" :content="this.$route.query.m" class="header"></el-page-header>
      <div ref="wrapper" class="scroll">
          <div class="content">
              <p>爆款推荐</p>
              <div class="baokuan">
                  <div class="baokuanitem" v-for="(item,index) in baokuan" :key="index">
                      <router-link :to="{name: 'itemdetail', params:{src:item.src, name:item.name, price:item.price}}">
                      <img :src="item.src" :alt="item.name" width="114px">
                      <p style="font-weight: 600;">{{ item.name }}</p>
                      <p>{{ item.price }}</p>
                  </router-link>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
// 第一种方案(原生)
import BScroll from 'better-scroll'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'module',
  data () {
    return {
      baokuan: [{ src: 'https://res2.vmallres.com/pimages//FssCdnProxy/vmall_bop_server/BopMaterialCenter/428_428_F148BD66D00FFCD3DC4AFFFAA3601B93.png', name: '亚都纯净型加湿器', price: '￥339' },
        { src: '', name: 'item2', price: '￥339' },
        { src: '', name: 'item3', price: '￥339' },
        { src: '', name: 'item4', price: '￥339' },
        { src: '', name: 'item3', price: '￥339' },
        { src: '', name: 'item3', price: '￥339' },
        { src: '', name: 'item3', price: '￥339' },
        { src: '', name: 'item3', price: '￥339' },
        { src: '', name: 'item3', price: '￥339' },
        { src: '', name: 'item3', price: '￥339' },
        { src: '', name: 'item3', price: '￥339' }]
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    }
  },
  // mounted: 生命周期的结束
  mounted () {
    this.$nextTick(() => {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, {
          probeType: 3,
          // 允许使用点击事件
          click: false,
          // 允许上拉加载
          pullUpLoad: {
            threshold: -10
          },
          // 允许下拉加载
          pullDownRefresh: {
            threshold: 100,
            stop: 0
          },
          scrollbar: {
            fade: false,
            interactive: true // 1.8.0 新增
          }
        })
        this.scroll.on('scroll', position => {
          // console.log(position)
        })
        this.scroll.on('pullingDown', () => {
          console.log('下拉加载')
        })
        this.scroll.on('pullingUp', () => {
          console.log('加载更多')
          // 可以加载多次
          this.scroll.finishPullUp()
        })
      } else {
        this.scroll.refresh()
      }
    })
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.backwrapper{
  overflow: hidden;
  height: 100%;
}

p {
  text-align: center;
  color: black;
}

.content p:first-child {
  font-weight: 600;
  font-size: 15px;
  padding: 10px 0 0 0;
}
.baokuanitem p{
  position: absolute;
  bottom: 30%;
}

.baokuanitem p:last-child{
  position: absolute;
  bottom: 0;
  /* left: 35%; */
  /* transform: translateX(-50%); */
}

.scroll {
  overflow: hidden;
  height: 100%;
}

.baokuan {
  padding: 20px 20px 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  /* 调整间距 */
}

.baokuanitem {
  height: 200px;
  background-color: white;
  border-radius: 10px;
  position: relative;
  display: flex;
  justify-content: center;
}

.baokuanitem img {
  /* border: 1px solid black; */
  border-radius: 10px;
  height: 114px;
  display: block;
}

.content, .backwrapper{
  background-color: rgb(241,243,245);

}
</style>
